import { useRef } from 'react';
import { Box } from "@mui/system";
import { Alert } from "@mui/material";
import styled from "@emotion/styled";

interface IProps {
    getCurrent?: React.Dispatch<React.SetStateAction<number>>,
    videoName: string, // 不含扩展名，只接收mp4文件
}

const CustomPlayer = styled('video')`
    width: 90%;
    height: auto;
`

const CustomBox = styled(Box)`
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: gray;
    height: auto;
    min-height: 25rem;
    max-height: 30rem;
`

const MonitorFrame = (props: IProps) => {
    const playerRef = useRef<any>();
    const timeUpdateHandler = () => {
        if(props.getCurrent !== undefined && playerRef.current?.currentTime !== undefined) {
            props.getCurrent(playerRef.current.currentTime);
        }
    }
    try {
        const videoSrc = require(`../Assets/video/${props.videoName}.mp4`); // require里不能是变量 坑死我了
        return (
            <CustomBox>
                <CustomPlayer
                autoPlay 
                muted 
                loop 
                ref={playerRef} 
                onTimeUpdate={timeUpdateHandler}>
                    <source src={videoSrc} type="video/mp4"></source>
                </CustomPlayer>
            </CustomBox>
        )
    }
    catch {
        const name = props.videoName;
        const alertStyle = {
            width: '10rem',
        }
        console.log(`找不到视频${name}`)
        return (
            <CustomBox>
                <Alert severity="error" sx={alertStyle}>
                    找不到视频：{name}
                </Alert>
            </CustomBox>
        )
      }
    
}

export default MonitorFrame;